<template>
<div>
    <div>
    <el-row>
  <el-col :span="8"><div class="grid-content bg-purple">订单确认</div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple-light"><img class="top" src="../assets/img/temp/cartTop02.png"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
  </div>
  <div class="dd">
    <el-row :gutter="20" height="15px" class="dingdan">
        <el-col :span="4"><div class="grid-content bg-purple"><span class="sp">订单内容</span></div></el-col>
        <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"><el-link :underline="false">返回购物车</el-link></div></el-col>
    </el-row>
    <el-table
      :data="order"
      style="width: 100%">
      <el-table-column
        prop="c_name"
        label="商品名">
      </el-table-column>
      <el-table-column
        prop="c_sort"
        label="类别">
      </el-table-column>
      <el-table-column
        prop="c_img"
        label="图片">
        <template  slot-scope="scope">
        <img style="width: 100px;height: 100px" :src="require('@/assets/img/basketball/'+ scope.row.c_img)" alt="这是图片">
      </template>
      </el-table-column>
      <el-table-column
        prop="c_count"
        label="数量">
      </el-table-column>
      <el-table-column
        prop="c_total_price"
        label="总价">
      </el-table-column>
    </el-table>
</div>
<div class="bor">
    <el-descriptions class="margin-top" title="收件信息" :column="3">
    <template slot="extra">
      <el-button class="btn" type="primary" @click="address()">操作</el-button>
    </template>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-user"></i>
        收件人
      </template>
      {{user.a_user}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-mobile-phone"></i>
        手机号
      </template>
      {{user.a_phone}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-tickets"></i>
        备注
      </template>
      <el-tag size="small">{{user.a_tag}}</el-tag>
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-office-building"></i>
        收货地址
      </template>
      {{user.a_address}}
    </el-descriptions-item>
  </el-descriptions>
</div>
<div class="bor">
    <div class="zj">
        <span class="sp">合计</span>
        <span>￥：{{sum}}</span>
    </div>
    <div style="margin-top: 50px">
        <el-button type="primary" @click="onSubmit()">支付</el-button>
    </div>
</div>
</div>
</template>
<script>
export default {
  name: 'Orders',
  data () {
    return {
      user: [],
      order: [],
      sum: 0
    }
  },
  methods: {
    // 支付
    onSubmit () {},
    // 地址修改
    address () {},
    // 计算合计方法
    total () {
      // initTable(this)
      console.log('dwadwdwd' + this.order.length)
      for (let i = 0; i < this.order.length; i++) {
        this.sum += this.order[i].c_total_price
      }
    }
  },
  mounted () {
    initTable(this)
    // console.log(this.order)
    // this.total()
  },
  // 计算合计
  beforeUpdate () {
    console.log(this.order)
    this.total()
  },
  computed: {
  }
}
function initTable ($this) {
  $this.$axios.get('/orders/selectByUid',
    {
      params: {
        u_id: 1
      }
    }).then(resp => {
    // console.log(resp.data.user)
    // console.log(resp.data.order)
    $this.user = resp.data.user
    $this.order = resp.data.order
  })
}
</script>
<style>
  .el-row {
    margin-bottom: 20px;
    /* &:last-child {
      margin-bottom: 0;
    } */
  }
  .el-col {
    border-radius: 4px;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 40px;
  }
  .row-bg {
    padding: 10px 0;
  }
  .dingdan, .address{
    background-color: #eee;
  }
  .center{
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  .bor {
    border-top: 30px solid #eee;
  }
  .sp {
    font-weight: 600;
  }
  .zj {
    width: 150px;
    height: 50px;
    line-height: 50px;
    margin: 0 auto;
  }
</style>
